<template>
<div> 
    <h3>折叠面板</h3>
    <div>
        <span @click="isOk=!isOk">{{isOk? "收起" : "展开"}}</span>
    </div>
    <div v-if="isOk" >
    <h4>11111</h4>
    <h4>22222</h4>
    <h4>33333</h4>
    </div>
   <h3>随机生成,字符</h3>
    <ul>
        <li v-for="(a,index) of arr" :key="index" >{{a}}  <button  @click="deleteElement(index)">删除</button></li>
    </ul>
<button @click="creatElement()">生成</button>

<div>
    <ul>
        <li v-for="(item,index) of arr1" :key=index >{{item}}</li>
    </ul>
    <button @click="changeIt">交换顺序</button>
</div>
</div>
</template>

<script>
   export default {
    data(){
      return{
        isOk:false,
        arr:[1,2,3,4],
        //json 字符串  外面用单引号，里面用双引号。
        oop:'{"a":1,"b":2}',
        arr1:['first','second','third'],
      }
    },

    mounted(){
     //console.log(JSON.parse(this.a));
     //console.log( typeof JSON.stringify(this.oop),JSON.stringify(this.oop));
     //console.log(typeof this.oop,this.oop);

     try{
        console.log( typeof JSON.parse(this.oop),JSON.parse(this.oop));
     } catch(error){
        console.log(error);
     }
    },
    methods:{
      deleteElement(index){
        this.arr.splice(index,1);
      },
      creatElement(){
       let num=Math.floor(Math.random()*20);
        this.arr.push(num);
      },
      changeIt(){
      this.arr1.push(this.arr1[0]);
      this.arr1.shift(this.arr1[0]);
      }
    },
        name:  '',
        components: {},
   }
</script>

<style scoped>

</style>